<template>
  <div class="login-bg" ref="loginBg">

    <div class="weui-cells weui-cells_form">

      <div class="weui-cell user-name">
        <div class="weui-cell__hd"><label class="weui-label">用户名</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="请输入用户名" v-model="nickName"/>
        </div>
      </div>


      <div class="user-name-warn">最长为6个汉字或12个字符</div>



      <div class="weui-cell btn">
        <div class="weui-cell__bd">
          <a class="login_btn weui-btn weui-btn_warn" :class="{active:isSetActive}" href="javascript:;" @click.prevent="setUserName">确认</a>
        </div>
      </div>



    </div>

  </div>
</template>

<script>
  import {getStore,getUser,setUser,getByteLen} from '../../assets/js/tools.js';
  import {updateByUser} from '../../assets/js/getData'
  export default {
    name: "setName",
    data(){
      return {
        nickName:'',//用户名
        user:null,
      }
    },
    created(){
      this.user = getUser();
      let wxUserInfo = getStore('wxUserInfo');
      if(wxUserInfo){
        this.nickName = JSON.parse(wxUserInfo).user.nickName;
      }
    },
    mounted(){
      // 元素的实际高度
      let h = this.$refs.loginBg.offsetHeight;
      let h2 = document.documentElement.clientHeight; //可见区域高度
      if(h<h2){
        this.$refs.loginBg.style.height = h2+'px';
      }
    },
    computed:{
      isSetActive(){
        if(this.nickName){
          return true;
        }else {
          return false;
        }
      }
    },
    methods:{
      setUserName(){
        if(!this.nickName){
          Toast('请输入用户名');
          return;
        }
        if(getByteLen(this.nickName)>12){
          Toast('最长为6个汉字或12个字符');
          return;
        }
        updateByUser({nickName:this.nickName,wasUpdateName:1}).then(res => {
          if(res.data.reqResult.code>0){
            let data = res.data.data;
            this.user.nickName = data.nickName;
            this.user.wasUpdateName = data.wasUpdateName;
            setUser(this.user);
            if(this.user.hasOwnProperty("affiliationCountry")){
              this.$router.push({name: 'home'});
            }else {
              this.$router.push({name: 'setCountry'});
            }
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      }
    }
  }
</script>

<style scoped>
  .login-bg{
    width: 100%;
    padding: 2.75rem 0 2.5rem 0;
    background: url("../../../static/images/login/login_bg.jpg") no-repeat;
    background-size: cover;
  }
  .weui-cells{
    padding: 0 1.9rem;
    background-color: transparent;
  }
  .weui-cells:before{
    border-top: none;
  }
  .weui-cells:after{
    border: none;
  }
  .weui-cell{
    padding: 1.3rem 0.6rem 0.65rem 0rem;
  }
  .weui-cell:before {
    border-top: none;
  }
  .user-name:after{
    content: " ";
    position: absolute;
    left: 3.5rem;
    bottom: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #666666;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
    z-index: 2;
  }
  .user-name{
    padding-top: 0.25rem;
  }
  .weui-label{
    color: #ffffff;
    width: 3.5rem;
  }
  .weui-input{
    font-size: 0.75rem;
    color: #ffffff;
    padding-left: 0.5rem;
  }
  .user-name-warn{
    color: #EEEEEE;
    font-size: 0.6rem;
    text-align: right;
    padding-right: 0.7rem;
    margin-top: 0.55rem;
  }
  .btn{
    padding: 1.25rem 0 1rem 0;
  }
  .login_btn{
    background-color: #874545;
    font-size: 0.75rem;
    box-shadow: 0px 2px 2px 0 rgba(0,0,0,0.4);
  }
  .login_btn.active{
    background-color: #AE1717;
  }
  .btn .login_btn.active:active{
    background-color: #AE1717;
  }
  .btn .login_btn:active{
    background-color: #874545;
    color: #ffffff;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
</style>
